<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部导航 headerContainer-->
    <div class="headerContainer">
        <div class="warpper nav">
            <img src="./common-img/logo.png" alt="">
            <ul class="navbar">
                <li class="navItem">
                    <a href="#" class="active">功能介绍</a>
                </li>
                <li class="navItem">
                    <a href="#">下载应用</a>
                </li>
                <li class="navItem">
                    <a href="#">高级会员</a>
                </li>
                <li class="navItem">
                    <a href="#">帮助中心</a>
                </li>
                <li class="navItem">
                    <a href="#">登录</a>
                </li>
                <li>
                    <a href="#">创建免费账号</a>
                </li>
            </ul>
        </div>
    </div>

    <div style=" height: 300px;"></div>

    <!-- 底部footer -->
    <div class="footer">
        <div class="warpper footer-container">
            <div class="links">
                <!-- 产品、帮助等 -->
                <div class="pageLinks">
                    <!-- 产品 -->
                    <dl>
                        <dt>产品</dt>
                        <dd><a href="#">功能介绍</a></dd>
                        <dd><a href="#">下载应用</a></dd>
                        <dd><a href="#">高级会员</a></dd>
                        <dd><a href="#">教育优惠</a></dd>
                        <dd><a href="#">礼品卡</a></dd>
                    </dl>
                    <!-- 帮助 -->
                    <dl>
                        <dt>帮助</dt>
                        <dd><a href="#">帮助中心</a></dd>
                        <dd><a href="#">FAQ</a></dd>
                    </dl>
                    <!-- 资源 -->
                    <dl>
                        <dt>资源</dt>
                        <dd><a href="#">URL Scheme</a></dd>
                    </dl>
                    <!-- 团队 -->
                    <dl>
                        <dt>团队</dt>
                        <dd><a href="#">功能介绍</a></dd>
                        <dd><a href="#">功能介绍</a></dd>
                        <dd><a href="#">媒体素材</a></dd>
                    </dl>
                    <!-- 法律 -->
                    <dl>
                        <dt>法律</dt>
                        <dd><a href="#">使用条款</a></dd>
                        <dd><a href="#">隐私声明</a></dd>
                        <dd><a href="#">开源协议</a></dd>
                    </dl>

                </div>
                <!-- 切换语言 -->
                <div class="mediaLinks">
                    <ul class="languagePicker">
                        <li>中文</li>
                        <li>English</li>
                    </ul>
                    中文
                    <div class="triangle"></div>
                </div>
            </div>
            <div class="copyrightWrapper">
                <span>© 2023 杭州随笔记网络技术有限公司</span>
                <span>
                    <a href="#">浙ICP备12005180号-3</a>
                </span>
                <span>
                    <img src="./common-img/bottom-i.png" alt="">
                    <a href="#">
                        浙公网安备 33010602005056号
                    </a>
                </span>
            </div>
        </div>
    </div>

    <script src="./js/common.js"></script>
</body>

</html>